<!DOCTYPE html>
<html dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Item</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script src="../../../../../dist/ionic.js"></script>
</head>

<body>
  <ion-app>

    <ion-header translucent>
      <ion-toolbar>
        <ion-title>Item</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content id="content" fullscreen>
      <ion-list>
        <ion-list-header>
          <ion-label>
            Basic Usage
          </ion-label>
        </ion-list-header>

        <!-- Default Item -->
        <ion-item>
          <ion-label>
            Item
          </ion-label>
        </ion-item>

        <!-- Item as a Button -->
        <ion-item (click)="buttonClick()">
          <ion-label>
            Button Item
          </ion-label>
        </ion-item>

        <!-- Item as an Anchor -->
        <ion-item href="https://www.ionicframework.com">
          <ion-label>
            Anchor Item
          </ion-label>
        </ion-item>

        <!-- Secondary Color Item-->
        <ion-item color="secondary">
          <ion-label>
            Secondary Color Item
          </ion-label>
        </ion-item>
      </ion-list>

      <ion-list>
        <ion-list-header>
          <ion-label>
            Detail Arrows
          </ion-label>
        </ion-list-header>

        <!-- Standard Item with Detail Arrow -->
        <ion-item detail>
          <ion-label>
            Standard Item with Detail Arrow
          </ion-label>
        </ion-item>

        <!-- Button Item with Detail Arrow -->
        <ion-item (click)="buttonClick()" detail>
          <ion-label>
            Button Item with Detail Arrow
          </ion-label>
        </ion-item>

        <!-- Item as an Anchor -->
        <ion-item href="#">
          <ion-label>
            Anchor Item
          </ion-label>
        </ion-item>

        <!-- Anchor Item with no Detail Arrow-->
        <ion-item detail="false" href="#">
          <ion-label>
            Anchor Item with no Detail Arrow
          </ion-label>
        </ion-item>
      </ion-list>

      <ion-list>
        <ion-list-header>
          <ion-label>
            List Items
          </ion-label>
        </ion-list-header>

        <!-- Item -->
        <ion-item>
          <ion-label>
            Item
          </ion-label>
        </ion-item>

        <!--  No Lines Item -->
        <ion-item lines="none">
          <ion-label>
            No Lines Item
          </ion-label>
        </ion-item>

        <!-- Multiline text Item -->
        <ion-item>
          <ion-label text-wrap>
          Multiline text that should wrap when it is too long
          to fit on one line in the item.
          </ion-label>
        </ion-item>

        <!-- Title and paragraph-->
        <ion-item>
          <ion-label text-wrap>
            <ion-text color="primary">
              <h3>H3 Primary Title</h3>
            </ion-text>
            <p>Paragraph line 1</p>
            <ion-text color="secondary">
              <p>Paragraph line 2 secondary</p>
            </ion-text>
          </ion-label>
        </ion-item>

        <!-- Item with Full Lines -->
        <ion-item lines="full">
          <ion-label>
            Item with Full Lines
          </ion-label>
        </ion-item>
      </ion-list>

      <ion-list>
        <ion-list-header>
          <ion-label>
            Item Lines
          </ion-label>
        </ion-list-header>

        <!-- Item Inset Lines -->
        <ion-item lines="inset">
          <ion-label>Item Lines Inset</ion-label>
        </ion-item>

        <!-- Item Full Lines -->
        <ion-item lines="full">
          <ion-label>Item Lines Full</ion-label>
        </ion-item>

        <!-- Item None Lines -->
        <ion-item lines="none">
          <ion-label>Item Lines None</ion-label>
        </ion-item>

        <!-- List Full Lines -->
        <ion-list lines="full">
          <ion-item>
            <ion-label>Full Lines Item 1</ion-label>
          </ion-item>

          <ion-item>
            <ion-label>Full Lines Item 2</ion-label>
          </ion-item>
        </ion-list>

        <!-- List Inset Lines -->
        <ion-list lines="inset">
          <ion-item>
            <ion-label>Inset Lines Item 1</ion-label>
          </ion-item>

          <ion-item>
            <ion-label>Inset Lines Item 2</ion-label>
          </ion-item>
        </ion-list>

        <!-- List No Lines -->
        <ion-list lines="none">
          <ion-item>
            <ion-label>No lines Item 1</ion-label>
          </ion-item>

          <ion-item>
            <ion-label>No lines Item 2</ion-label>
          </ion-item>

          <ion-item>
            <ion-label>No lines Item 3</ion-label>
          </ion-item>
        </ion-list>
      </ion-list>

      <ion-list>
        <ion-list-header>
          <ion-label>
            Media Items
          </ion-label>
        </ion-list-header>

        <ion-item (click)="testClick()">
          <ion-avatar slot="start">
            <img src="">
          </ion-avatar>
          <ion-label>
            Avatar Start, Button Item
          </ion-label>
        </ion-item>

        <ion-item href="#">
          <ion-label>
            Thumbnail End, Anchor Item
          </ion-label>
          <ion-thumbnail slot="end">
            <img src="">
          </ion-thumbnail>
        </ion-item>

        <ion-item>
          <ion-thumbnail slot="start">
            <img src="">
          </ion-thumbnail>
          <ion-label>
            <h2>H2 Title Text</h2>
            <p>Button on right</p>
          </ion-label>
          <ion-button fill="outline" slot="end">View</ion-button>
        </ion-item>

        <ion-item (click)="testClick()">
          <ion-thumbnail slot="start">
            <img src="">
          </ion-thumbnail>
          <ion-label>
            <h3>H3 Title Text</h3>
            <p>Icon on right</p>
          </ion-label>
          <ion-icon name="close-circle" slot="end"></ion-icon>
        </ion-item>

      </ion-list>

      <ion-list>
        <ion-list-header>
          <ion-label>
            Buttons in Items
          </ion-label>
        </ion-list-header>
        <ion-item>
          <ion-button slot="start">
            Start
          </ion-button>
          <ion-label>Button Start/End</ion-label>
          <ion-button slot="end">
            End
          </ion-button>
        </ion-item>

        <ion-item>
          <ion-button slot="start">
            Start Icon
            <ion-icon name="home" slot="end"></ion-icon>
          </ion-button>
          <ion-label>Buttons with Icons</ion-label>
          <ion-button slot="end">
            <ion-icon name="star" slot="end"></ion-icon>
            End Icon
          </ion-button>
        </ion-item>

        <ion-item>
          <ion-button slot="start">
            <ion-icon slot="icon-only" name="navigate"></ion-icon>
          </ion-button>
          <ion-label>Icon only Buttons</ion-label>
          <ion-button slot="end">
            <ion-icon slot="icon-only" name="star"></ion-icon>
          </ion-button>
        </ion-item>
      </ion-list>

      <ion-list>
        <ion-list-header>
          <ion-label>
            Icons in Items
          </ion-label>
        </ion-list-header>
        <ion-item>
          <ion-label>
            Icon End
          </ion-label>
          <ion-icon name="information-circle" slot="end"></ion-icon>
        </ion-item>

        <ion-item>
          <ion-label>
            Large Icon End
          </ion-label>
          <ion-icon name="information-circle" size="large" slot="end"></ion-icon>
        </ion-item>

        <ion-item>
          <ion-label>
            Small Icon End
          </ion-label>
          <ion-icon name="information-circle" size="small" slot="end"></ion-icon>
        </ion-item>

        <ion-item>
          <ion-icon name="star" slot="start"></ion-icon>
          <ion-label>
            Icon Start
          </ion-label>
        </ion-item>

        <ion-item>
          <ion-label>
            Two Icons End
          </ion-label>
          <ion-icon name="checkmark-circle" slot="end"></ion-icon>
          <ion-icon name="shuffle" slot="end"></ion-icon>
        </ion-item>
      </ion-list>

      <ion-list>
        <ion-list-header>
          <ion-label>
            Item Inputs
          </ion-label>
        </ion-list-header>

        <ion-item>
          <ion-label position="floating">Datetime</ion-label>
          <ion-datetime></ion-datetime>
        </ion-item>

        <ion-item>
          <ion-label position="floating">Select</ion-label>
          <ion-select>
            <ion-select-option value="">No Game Console</ion-select-option>
            <ion-select-option value="nes">NES</ion-select-option>
            <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
            <ion-select-option value="ps">PlayStation</ion-select-option>
            <ion-select-option value="genesis">Sega Genesis</ion-select-option>
            <ion-select-option value="saturn">Sega Saturn</ion-select-option>
            <ion-select-option value="snes">SNES</ion-select-option>
          </ion-select>
        </ion-item>

        <ion-item>
          <ion-label>Toggle</ion-label>
          <ion-toggle slot="end"></ion-toggle>
        </ion-item>

        <ion-item>
          <ion-label position="floating">Floating Input</ion-label>
          <ion-input></ion-input>
        </ion-item>

        <ion-item>
          <ion-label>Input (placeholder)</ion-label>
          <ion-input placeholder="Placeholder"></ion-input>
        </ion-item>

        <ion-item>
          <ion-label>Checkbox</ion-label>
          <ion-checkbox slot="start"></ion-checkbox>
        </ion-item>

        <ion-item>
          <ion-label>Range</ion-label>
          <ion-range></ion-range>
        </ion-item>
      </ion-list>
    </ion-content>

    <ion-footer>
      <ion-toolbar>
        <ion-title>Footer</ion-title>
      </ion-toolbar>
    </ion-footer>
  </ion-app>
</body>

</html>
